import React from 'react';
import styles from './styles.less';
import classnames from 'classnames';

const Index: React.FC<any> = () => {
    const [activityKey, setActivityKey] = React.useState<string | number>(1);
    const tabPanes = [
        {
            content: 'CSS1',
            key: 1,
        },
        {
            content: 'CSS2',
            key: 2,
        },
        {
            content: 'CSS3',
            key: 3,
        },
    ];

    return (
        <div className={classnames(styles['tabs-css-container'])}>
            {tabPanes.map((item) => (
                <div
                    onClick={() => setActivityKey(item.key)}
                    key={item.key}
                    className={classnames(
                        styles['tabs-css-tabPane'],
                        activityKey === item.key && styles['tabs-css-tabPane-active'],
                    )}
                >
                    {item.content}
                </div>
            ))}
        </div>
    );
};

export default Index;
